import { UserOutlined } from "@ant-design/icons";
import { Avatar, Flex, Layout, Menu, theme } from "antd";
// import message from "@/store/modules/messageStore";
import IconFont from "@/component/Common/IconFont";
import { Link, Outlet, useLocation } from "react-router";
import { items } from "./RootData";
import { useUser } from "@/hook/useUser/useUser";
import { useCallback, useState } from "react";


const { Header, Content, Footer } = Layout;

export default function Root() {
  const { isLoggedIn, currentUser } = useUser();
  const { pathname } = useLocation();
  const [currentTab, setCurrentTab] = useState(pathname.slice(1) || "comprehensive");
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const handleMenuClick = useCallback((e) => {
    setCurrentTab(e.key);
  }, []);

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Header
        style={{
          backgroundColor: "white",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          marginBottom: "1rem",
          boxShadow:
            "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
        }}>
        <Flex
          style={{ width: "800px" }}
          gap={12}
          align="center"
          justify="space-between">
          <IconFont
            icon={"#icon-S"}
            className={"icon-S"}
            width={"2rem"}
            height={"2rem"}
            viewBox={"0 0 100 100"}
          />
          <Menu
            theme="light"
            mode="horizontal"
            defaultSelectedKeys={["comprehensive"]}
            selectedKeys={[currentTab]}
            onClick={handleMenuClick}
            items={items}
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          />
          <Link to="/user">
            <Avatar size={32} icon={!isLoggedIn && <UserOutlined />}>
              {isLoggedIn && currentUser?.email && currentUser?.email[0]}
            </Avatar>
          </Link>
        </Flex>
      </Header>
      <Content
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "start",
          padding: "0 48px",
          minHeight: "60rem",
        }}>
        {/* <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            width: "600px",
            background: colorBgContainer,
            minHeight: 280,
            padding: 24,
            borderRadius: borderRadiusLG,
          }}> */}
        {/* <button onClick={() => message.success("hello")}></button> */}
        <Outlet />
        {/* </div> */}
      </Content>
      <Footer style={{ textAlign: "center" }}>
        萍乡学院信息与计算机工程学院，python爬虫作业 基于React,flask,Ant
      </Footer>
    </Layout>
  );
}
